
function initCalendar(showButtonID,textBoxID){
    var Event = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        dialog,
        calendar,
        navArea;

    var showBtn = Dom.get(showButtonID);
    var textBtn = Dom.get(textBoxID);
    
    var eventSourceIds = [showBtn,textBtn];

    Event.on(eventSourceIds, "click", function() {
    	
    	 // Lazy Dialog Creation - Wait to create the Dialog, and setup document
    	// click listeners, until the first time the button is clicked.
       if (!dialog) {

          	function closeDateHandler() {
    			dialog.hide();
            }
    	
    	    // Hide Calendar if we click anywhere in the document other than the calendar icon
    	    Event.on(document, "click", function(e) {
    	        var el = Event.getTarget(e);
    	        if(dialog != null){
    	        	var dialogEl = dialog.element;
    	        	if (el != dialogEl && !Dom.isAncestor(dialogEl, el) && el != showBtn && !Dom.isAncestor(showBtn, el)) {
    	        		dialog.hide();
    	        	}
    	        }
    	    });

    	    var dialogDiv = document.getElementById("calendarDialogContainerDate-"+textBoxID);
    	    dialogDiv.style.display = "block";
    	    
           	dialog = new YAHOO.widget.Dialog("calendarDialogContainerDate-"+textBoxID, {
    					visible:false,
    					//context:["show", "tl", "bl"], // this moves div up for
    													// every click
    					draggable: true,
    					zIndex: 30000,
    					underlay: 'none',
    					modal: true,
    					close:true
    					
    					});

    		dialog.render(document.body);
    		dialog.showEvent.subscribe(function() {
    			if (YAHOO.env.ua.ie) {
    				// Since we're hiding the table using yui-overlay-hidden, we
    				// want to let the dialog know that the content size has
    				// changed, when
    				// shown
    				dialog.fireEvent("changeContent");
    			}
    		});

    		var closeButton = YAHOO.util.Dom.getElementsByClassName("container-close", "a", "calendarDialogContainerDate-"+textBoxID);

    		YAHOO.util.Dom.setStyle(closeButton, 'top', '10px');
    		YAHOO.util.Dom.setStyle(closeButton, 'right', '20px');
    		YAHOO.util.Dom.setStyle(closeButton, 'z-index', '40000');
    		YAHOO.util.Dom.setAttribute(closeButton, 'accesskey', 'x');
    		YAHOO.util.Event.on(closeButton, "click", function() { dialog.hide(); } );


    	} // dialog

        // Lazy Calendar Creation - Wait to create the Calendar until the first time
    	// the button is clicked.
    	if (!calendar) {
    		// Override default properties
    		YAHOO.widget.Calendar.DEFAULT_CONFIG.STRINGS.value = null; // remove
    																	// Previous
    																	// Month/Next
    																	// Month
    		
    		var now = new Date();
    		var currMon =now.getMonth() + 1;
    		var currDate = currMon + "/" + now.getFullYear();
    		// Create calendar group control
    		calendar = new YAHOO.widget.CalendarGroup(textBoxID,
    							"calcontrolDate-"+textBoxID,
    							{pages: 2,
    							 close: false,
    							 START_WEEKDAY: 0,
    							 HIDE_BLANK_WEEKS: true,
    							 LOCALE_WEEKDAYS: "1char",
    							 pagedate : currDate
    							}
    						);
    		// Add month navigation to the calendar control
    		navArea = document.getElementById('navDate-'+textBoxID);
    		var closeLink = document.getElementById("closeDate-"+textBoxID);

            if (navArea != null && closeLink != null) {
            	navArea.style.display = 'block';
            	closeLink.onclick = closeDateHandler;

            }
    		calendar.render();
    		var xy = Dom.getXY(showButtonID);
    		xy[1] = xy[1] + 25; // Make sure the calendar is displayed under the box
    		xy[0] = xy[0] - 260; // Make sure the calendar is displayed below and left of the box
    		Dom.setXY('calendarDialogContainerDate-'+textBoxID, xy);

    		// Previous month click
    		var prevmonth = function(e ,obj) {
    			obj.previousMonth();
    		};

    		Event.addListener("prevmonthDate-"+textBoxID, "click", prevmonth,calendar,true);

    		// Next month click
    		var nextmonth = function(e,obj) {
    			obj.nextMonth();
    		};

    		Event.addListener("nextmonthDate-"+textBoxID, "click", nextmonth,calendar,true);


    		calendar.selectEvent.subscribe(function(e) {
    			if (calendar.getSelectedDates().length > 0) {
    				var el = Event.getTarget(e); 
    				var selDate = calendar.getSelectedDates()[0];
    					// Pretty Date Output, using Calendar's Locale values:
    					// Friday, 8 February 2008
    				var wStr = calendar.cfg.getProperty("WEEKDAYS_LONG")[selDate.getDay()];
    				var dStr = selDate.getDate();
    				var mStr = (selDate.getMonth() + 1);
    				
    				if(new String(mStr).length<2){
    					mStr='0'+mStr;
    				}
    				
    				if(new String(dStr).length<2){
    					dStr='0'+dStr;
    				}
    				
    				var yStr = selDate.getFullYear();
    				//dd/mm/yyyy	
    				Dom.get(calendar.id).value = dStr + "/" + mStr + "/" + yStr;
    				
    				//Dom.get("txt_selectedVisitDate").value = mStr + "/" + dStr + "/" + yStr;
    			} else {
    			    Dom.get(calendar.id).value = "";
    				//Dom.get("txt_selectedVisitDate").value = "";
    			}
    			document.getElementById("closeDate-"+textBoxID).click();
    			dialog.hide();
    			//navArea.style.display = 'none';
    			//Dom.get(textBoxID).focus();
    			
    		},calendar,true);

    		calendar.renderEvent.subscribe(function() {
    			// Tell Dialog it's contents have changed, which allows
    			// container to redraw the underlay (for IE6/Safari2)
    			dialog.fireEvent("changeContent");
    		});

    		// Set focus to either the current day, or first day of the month in
    		// the Calendar when it is made visible or the month changes

    		var focusDay = function () {
    		   var oCalendarTBody = Dom.get(textBoxID+"_0").tBodies[0],
    		       aElements = oCalendarTBody.getElementsByTagName("a"),
    		       oAnchor;


    		   if (aElements.length > 0) {

    		       Dom.batch(aElements, function (element) {

    			   if (Dom.hasClass(element.parentNode, "today")) {
    			       oAnchor = element;
    			   }

    		       });


    		       if (!oAnchor) {
    			   oAnchor = aElements[0];
    		       }


    		       // Focus the anchor element using a timer since Calendar will
    				// try
    		       // to set focus to its next button by default

    		       YAHOO.lang.later(0, oAnchor, function () {
    			   try {
    			       oAnchor.focus();
    			   }
    			   catch(e) {}
    		       });

    		   }

    		};
    		calendar.renderEvent.subscribe(focusDay, calendar, true);
    		// Give the Calendar an initial focus
    		focusDay.call(calendar);

    	}else{
    		var xy = Dom.getXY(showButtonID);
    		xy[1] = xy[1] + 25; // Make sure the calendar is displayed under the box
    		xy[0] = xy[0] - 260; // Make sure the calendar is displayed below and left of the box
    		Dom.setXY('calendarDialogContainerDate-'+textBoxID, xy);

    	}

    	var seldate = calendar.getSelectedDates();

    	if (seldate.length > 0) {
    		// Set the pagedate to show the selected date if it exists
    		calendar.cfg.setProperty("pagedate", seldate[0]);
    		calendar.render();
    	}

    	// Show the calendar popup
    	dialog.show();
    });
 
}
